<!-- 管理员 -->
<template>
  <div>
    <ql-space>
      <ql-card>
        <template #header>
          数据筛选
        </template>
        <template #search>
          <el-form
            :disabled="listLoading"
            inline
            :model="listParams"
          >
            <el-form-item label="用户昵称：">
              <el-input
                v-model="listParams.username"
                clearable
                placeholder="请输入用户昵称"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                @click="onSubmit"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </template>
      </ql-card>

      <ql-card>
        <template #header>
          <el-button
            v-btn:create="$route"
            type="primary"
            @click="formVisible = true"
          >
            创建管理员
          </el-button>
        </template>
        <el-table
          v-loading="listLoading"
          :data="list"
        >
          <el-table-column
            prop="userId"
            label="用户ID"
          />
          <el-table-column
            prop="name"
            label="用户姓名"
          />
          <el-table-column
            prop="username"
            label="用户账号"
          />
          <el-table-column
            prop="email"
            label="邮箱"
          />
          <el-table-column
            prop="mobile"
            label="手机号"
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
          />
          <el-table-column
            prop="status"
            label="状态"
          >
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="1"
                :inactive-value="0"
                active-text="启用"
                inactive-text="禁用"
                :loading="scope.row.statusLoading"
                @change="handleStatusChange(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            width="162"
            label="操作"
          >
            <template #default="scope">
              <el-button
                v-btn:edit="$route"
                text
                bg
                type="primary"
                @click="handleUpdate(scope.row.userId)"
              >
                编辑
              </el-button>
              <el-popconfirm
                title="确认删除吗？"
                @confirm="handleDelete(scope.row.userId)"
              >
                <template #reference>
                  <el-button
                    v-btn:delete="$route"
                    text
                    bg
                    type="primary"
                  >
                    删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <ql-pagination
          v-show="total>0"
          v-model:current-page="listParams.page"
          v-model:page-size="listParams.limit"
          :total="total"
          :disabled="listLoading"
          @pagination="loadList"
        />
      </ql-card>
    </ql-space>
    <admin-form
      v-model:admin-id="adminId"
      v-model="formVisible"
      @success="handleFormSuccess"
    />
  </div>
</template>
<script>
import { userList, userUpdate, userDelete } from '@/api/setting/admin'
import AdminForm from './components/AdminForm.vue'
export default {
  name: 'IndexSettingAdmin'
}
</script>

<script setup>

// 基础数据信息
const listLoading = ref(false)
const total = ref(0)
const listParams = reactive({
  page: 1,
  limit: 10,
  username: ''
})
const list = ref([])

// 初始信息
onMounted(() => {
  loadList()
})

const loadList = async () => {
  listLoading.value = true
  const data = await userList(listParams).finally(() => {
    listLoading.value = false
  })
  total.value = data.totalCount

  data.list.forEach(item => {
    item.statusLoading = false // 控制切换状态的 loading 效果
  })
  list.value = data.list
}

// 查询
const onSubmit = async () => {
  listParams.page = 1 // 查询默认从第1页开始
  loadList()
}

// 状态
const handleStatusChange = async (item) => {
  console.log(item)
  item.statusLoading = true
  await userUpdate(item).finally(() => {
    item.statusLoading = false
  })
  ElMessage.success(`${item.status === 1 ? '启用' : '禁用'}成功`)
}

// 弹框
const formVisible = ref(false)
const handleFormSuccess = () => {
  formVisible.value = false
  loadList()
}

// 编辑
const adminId = ref(null)
const handleUpdate = (id) => {
  adminId.value = id
  formVisible.value = true
}

// 删除
const handleDelete = async (id) => {
  await userDelete([id])
  ElMessage.success('删除成功')
  loadList()
}
</script>

<style scoped lang='scss'>

</style>
